<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>社交网站手机端验证组件集合</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    :root {
      --primary: #1877F2;
      --secondary: #6c757d;
      --light: #f8f9fa;
      --dark: #343a40;
      --white: #ffffff;
      --border: #eee;
      --shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      
      /* 不同风格主题色 */
      --style1: #1877F2; /* 经典社交蓝 */
      --style2: #E1306C; /* 活力粉 */
      --style3: #3B82F6; /* 科技蓝 */
      --style4: #111827; /* 深色模式 */
      --style5: #F97316; /* 活力橙 */
      --style6: #8B5CF6; /* 优雅紫 */
    }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: #f5f5f5;
      color: var(--dark);
      min-height: 100vh;
      padding: 0;
      margin: 0;
    }
    
    .container {
      max-width: 420px;
      margin: 0 auto;
      background-color: var(--white);
      min-height: 100vh;
      box-shadow: var(--shadow);
      overflow: hidden;
      position: relative;
    }
    
    /* 主页面内容 */
    .main-content {
      padding: 20px;
      text-align: center;
      padding-top: 60px;
    }
    
    .app-logo {
      font-size: 60px;
      color: var(--primary);
      margin-bottom: 20px;
    }
    
    .app-name {
      font-size: 28px;
      font-weight: 700;
      margin-bottom: 10px;
    }
    
    .app-desc {
      color: var(--secondary);
      margin-bottom: 30px;
    }
    
    .action-btn {
      padding: 12px 30px;
      background-color: var(--primary);
      color: white;
      border: none;
      border-radius: 8px;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s;
      margin-bottom: 20px;
    }
    
    .action-btn:hover {
      opacity: 0.9;
      transform: translateY(-2px);
    }
    
    /* 验证组件基础样式 */
    .verification-container {
      display: none;
      padding: 25px 20px;
    }
    
    .verification-container.active {
      display: block;
      animation: fadeIn 0.3s ease forwards;
    }
    
    .verification-header {
      text-align: center;
      margin-bottom: 30px;
    }
    
    .verification-title {
      font-size: 20px;
      font-weight: 600;
      margin-bottom: 8px;
    }
    
    .verification-desc {
      font-size: 15px;
      color: var(--secondary);
      margin-bottom: 0;
    }
    
    /* 提示文字样式 */
    .info-alert {
      padding: 15px;
      border-radius: 8px;
      margin-bottom: 25px;
      font-size: 14px;
      display: flex;
      align-items: flex-start;
      gap: 12px;
    }
    
    .info-alert i {
      font-size: 18px;
      margin-top: 1px;
    }
    
    .alert-info {
      background-color: rgba(59, 130, 246, 0.1);
      color: #1e40af;
    }
    
    .alert-warning {
      background-color: rgba(245, 158, 11, 0.1);
      color: #92400e;
    }
    
    /* 图片选择验证样式 */
    .image-verification {
      margin-bottom: 30px;
    }
    
    .verify-instruction {
      font-size: 15px;
      margin-bottom: 15px;
      text-align: center;
      font-weight: 500;
    }
    
    .image-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      margin-bottom: 25px;
    }
    
    .verify-image {
      aspect-ratio: 1/1;
      border-radius: 8px;
      overflow: hidden;
      position: relative;
      cursor: pointer;
      border: 2px solid transparent;
      transition: all 0.2s;
    }
    
    .verify-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    
    .verify-image.selected {
      border-color: var(--primary);
    }
    
    .verify-image.selected::after {
      content: '\f00c';
      font-family: 'FontAwesome';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: rgba(24, 119, 242, 0.8);
      color: white;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .verification-actions {
      display: flex;
      gap: 10px;
      margin-top: 20px;
    }
    
    .verify-btn {
      flex: 1;
      padding: 12px;
      border-radius: 8px;
      font-size: 16px;
      font-weight: 600;
      border: none;
      cursor: pointer;
      transition: all 0.2s;
    }
    
    .btn-confirm {
      background-color: var(--primary);
      color: white;
    }
    
    .btn-refresh {
      background-color: var(--light);
      color: var(--dark);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
    }
    
    /* 验证结果提示 */
    .result-modal {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 1050;
    }
    
    .result-modal.active {
      display: flex;
    }
    
    .result-content {
      background-color: var(--white);
      padding: 30px 25px;
      border-radius: 16px;
      max-width: 320px;
      width: 90%;
      text-align: center;
      animation: popIn 0.3s ease forwards;
    }
    
    .result-icon {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 20px;
      font-size: 30px;
      color: white;
    }
    
    .success-icon {
      background-color: #10b981;
    }
    
    .error-icon {
      background-color: #ef4444;
    }
    
    .result-title {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 10px;
    }
    
    .result-desc {
      color: var(--secondary);
      margin-bottom: 25px;
      font-size: 14px;
    }
    
    /* 样式切换器 */
    .style-switcher {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 1010;
      background-color: white;
      border-radius: 8px;
      box-shadow: var(--shadow);
      overflow: hidden;
      width: 180px;
    }
    
    .switcher-header {
      padding: 10px 16px;
      font-size: 14px;
      font-weight: 600;
      border-bottom: 1px solid #eee;
    }
    
    .switcher-option {
      padding: 12px 16px;
      font-size: 14px;
      cursor: pointer;
      transition: background-color 0.2s;
    }
    
    .switcher-option:hover {
      background-color: #f9f9f9;
    }
    
    .switcher-option.active {
      background-color: var(--primary);
      color: white;
    }
    
    /* 控制按钮 */
    .control-buttons {
      padding: 15px 20px;
      display: flex;
      gap: 10px;
      background-color: white;
      border-top: 1px solid var(--border);
      position: fixed;
      bottom: 0;
      width: 100%;
      max-width: 420px;
      box-sizing: border-box;
    }
    
    .control-btn {
      flex: 1;
      padding: 10px;
      border: none;
      border-radius: 8px;
      background-color: var(--primary);
      color: white;
      font-weight: 500;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
    }
    
    /* 返回按钮 */
    .back-btn {
      position: absolute;
      top: 20px;
      left: 20px;
      background: none;
      border: none;
      font-size: 20px;
      color: var(--dark);
      cursor: pointer;
      z-index: 10;
    }
    
    /* 各种风格的样式 */
    /* 风格1：经典社交 */
    .style-1 {
      --primary: var(--style1);
    }
    
    /* 风格2：活力粉色 */
    .style-2 {
      --primary: var(--style2);
    }
    
    .style-2 .verify-image.selected {
      border-color: var(--primary);
    }
    
    .style-2 .verify-image.selected::after {
      background-color: rgba(225, 48, 108, 0.8);
    }
    
    .style-2 .info-alert {
      border-left: 4px solid var(--primary);
      border-radius: 0 8px 8px 0;
    }
    
    /* 风格3：科技蓝 */
    .style-3 {
      --primary: var(--style3);
    }
    
    .style-3 .verification-container {
      background-color: rgba(59, 130, 246, 0.03);
      min-height: 100vh;
    }
    
    .style-3 .image-grid {
      gap: 8px;
    }
    
    .style-3 .verify-image {
      border-radius: 4px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }
    
    /* 风格4：深色模式 */
    .style-4 {
      --primary: var(--style4);
      --dark: white;
      --secondary: #9ca3af;
      --border: #374151;
      --light: #1f2937;
    }
    
    .style-4 .container {
      background-color: #111827;
      color: white;
    }
    
    .style-4 .verification-container {
      background-color: #111827;
    }
    
    .style-4 .result-content {
      background-color: #1f2937;
      color: white;
    }
    
    .style-4 .btn-confirm {
      background-color: #3b82f6;
    }
    
    .style-4 .back-btn {
      color: white;
    }
    
    /* 风格5：活力橙 */
    .style-5 {
      --primary: var(--style5);
    }
    
    .style-5 .verification-header {
      background: linear-gradient(90deg, #F97316, #FB923C);
      color: white;
      padding: 25px 20px;
      margin: -25px -20px 30px;
      border-radius: 0 0 20px 20px;
    }
    
    .style-5 .verification-desc {
      color: rgba(255, 255, 255, 0.9);
    }
    
    .style-5 .verify-btn {
      border-radius: 25px;
    }
    
    /* 风格6：优雅紫色 */
    .style-6 {
      --primary: var(--style6);
    }
    
    .style-6 .image-grid {
      gap: 12px;
    }
    
    .style-6 .verify-image {
      border-radius: 12px;
      transition: transform 0.2s;
    }
    
    .style-6 .verify-image:hover {
      transform: scale(1.03);
    }
    
    .style-6 .verify-image.selected {
      box-shadow: 0 0 0 3px var(--primary);
    }
    
    .style-6 .info-alert {
      border-radius: 12px;
      background-color: rgba(139, 92, 246, 0.08);
    }
    
    /* 动画效果 */
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }
    
    @keyframes popIn {
      from { opacity: 0; transform: scale(0.9); }
      to { opacity: 1; transform: scale(1); }
    }
    
    /* 响应式调整 */
    @media (max-width: 360px) {
      .verify-btn {
        font-size: 15px;
        padding: 10px;
      }
      
      .verification-title {
        font-size: 18px;
      }
    }
  </style>
</head>
<body class="style-1">
  <!-- 样式切换器 -->
  <div class="style-switcher">
    <div class="switcher-header">选择验证组件样式</div>
    <div class="switcher-option active" data-style="1">经典社交</div>
    <div class="switcher-option" data-style="2">活力粉色</div>
    <div class="switcher-option" data-style="3">科技蓝</div>
    <div class="switcher-option" data-style="4">深色模式</div>
    <div class="switcher-option" data-style="5">活力橙</div>
    <div class="switcher-option" data-style="6">优雅紫色</div>
  </div>
  
  <div class="container">
    <!-- 主页面内容 -->
    <div class="main-content" id="mainPage">
      <div class="app-logo">
        <i class="fa fa-shield"></i>
      </div>
      <h1 class="app-name">安全验证</h1>
      <p class="app-desc">选择合适的验证方式，保护您的账号安全</p>
      <button class="action-btn" id="startVerifyBtn">开始验证</button>
      <p>请完成以下验证以继续使用社交功能</p>
    </div>
    
    <!-- 验证组件 - 风格1：经典社交 -->
    <div class="verification-container" id="verify1">
      <button class="back-btn" id="back1">&larr;</button>
      
      <div class="verification-header">
        <h2 class="verification-title">安全验证</h2>
        <p class="verification-desc">请完成图片验证，以确认您不是机器人</p>
      </div>
      
      <div class="info-alert alert-info">
        <i class="fa fa-info-circle"></i>
        <div>
          <strong>提示：</strong>为了保护您的账号安全，我们需要确认您是真人操作。请选择所有包含"汽车"的图片。
        </div>
      </div>
      
      <div class="image-verification">
        <p class="verify-instruction">请选择所有包含汽车的图片</p>
        
        <div class="image-grid">
          <div class="verify-image" data-index="1">
            <img src="https://picsum.photos/id/1071/200/200" alt="验证图片1">
          </div>
          <div class="verify-image" data-index="2">
            <img src="https://picsum.photos/id/1072/200/200" alt="验证图片2">
          </div>
          <div class="verify-image" data-index="3">
            <img src="https://picsum.photos/id/1073/200/200" alt="验证图片3">
          </div>
          <div class="verify-image" data-index="4">
            <img src="https://picsum.photos/id/1074/200/200" alt="验证图片4">
          </div>
          <div class="verify-image" data-index="5">
            <img src="https://picsum.photos/id/1075/200/200" alt="验证图片5">
          </div>
          <div class="verify-image" data-index="6">
            <img src="https://picsum.photos/id/1076/200/200" alt="验证图片6">
          </div>
          <div class="verify-image" data-index="7">
            <img src="https://picsum.photos/id/1077/200/200" alt="验证图片7">
          </div>
          <div class="verify-image" data-index="8">
            <img src="https://picsum.photos/id/1078/200/200" alt="验证图片8">
          </div>
          <div class="verify-image" data-index="9">
            <img src="https://picsum.photos/id/1079/200/200" alt="验证图片9">
          </div>
        </div>
        
        <div class="verification-actions">
          <button class="verify-btn btn-refresh">
            <i class="fa fa-refresh"></i> 刷新
          </button>
          <button class="verify-btn btn-confirm">确认</button>
        </div>
      </div>
    </div>
    
    <!-- 验证组件 - 风格2：活力粉色 -->
    <div class="verification-container" id="verify2">
      <button class="back-btn" id="back2">&larr;</button>
      
      <div class="verification-header">
        <h2 class="verification-title">人机验证</h2>
        <p class="verification-desc">选择正确图片完成验证，保护账号安全</p>
      </div>
      
      <div class="info-alert alert-warning">
        <i class="fa fa-exclamation-circle"></i>
        <div>
          请选择所有包含"自行车"的图片，选错将需要重新验证。
        </div>
      </div>
      
      <div class="image-verification">
        <p class="verify-instruction">选择所有包含自行车的图片</p>
        
        <div class="image-grid">
          <div class="verify-image" data-index="10">
            <img src="https://picsum.photos/id/133/200/200" alt="验证图片10">
          </div>
          <div class="verify-image" data-index="11">
            <img src="https://picsum.photos/id/134/200/200" alt="验证图片11">
          </div>
          <div class="verify-image" data-index="12">
            <img src="https://picsum.photos/id/135/200/200" alt="验证图片12">
          </div>
          <div class="verify-image" data-index="13">
            <img src="https://picsum.photos/id/136/200/200" alt="验证图片13">
          </div>
          <div class="verify-image" data-index="14">
            <img src="https://picsum.photos/id/137/200/200" alt="验证图片14">
          </div>
          <div class="verify-image" data-index="15">
            <img src="https://picsum.photos/id/138/200/200" alt="验证图片15">
          </div>
          <div class="verify-image" data-index="16">
            <img src="https://picsum.photos/id/139/200/200" alt="验证图片16">
          </div>
          <div class="verify-image" data-index="17">
            <img src="https://picsum.photos/id/140/200/200" alt="验证图片17">
          </div>
          <div class="verify-image" data-index="18">
            <img src="https://picsum.photos/id/141/200/200" alt="验证图片18">
          </div>
        </div>
        
        <div class="verification-actions">
          <button class="verify-btn btn-refresh">
            <i class="fa fa-refresh"></i> 换一组
          </button>
          <button class="verify-btn btn-confirm">提交验证</button>
        </div>
      </div>
    </div>
    
    <!-- 验证组件 - 风格3：科技蓝 -->
    <div class="verification-container" id="verify3">
      <button class="back-btn" id="back3">&larr;</button>
      
      <div class="verification-header">
        <h2 class="verification-title">安全验证</h2>
        <p class="verification-desc">完成验证以继续操作</p>
      </div>
      
      <div class="info-alert alert-info">
        <i class="fa fa-lightbulb-o"></i>
        <div>
          系统检测到异常登录行为，请选择所有包含"红绿灯"的图片进行验证。
        </div>
      </div>
      
      <div class="image-verification">
        <p class="verify-instruction">选择所有包含红绿灯的图片</p>
        
        <div class="image-grid">
          <div class="verify-image" data-index="19">
            <img src="https://picsum.photos/id/1067/200/200" alt="验证图片19">
          </div>
          <div class="verify-image" data-index="20">
            <img src="https://picsum.photos/id/1068/200/200" alt="验证图片20">
          </div>
          <div class="verify-image" data-index="21">
            <img src="https://picsum.photos/id/1069/200/200" alt="验证图片21">
          </div>
          <div class="verify-image" data-index="22">
            <img src="https://picsum.photos/id/1070/200/200" alt="验证图片22">
          </div>
          <div class="verify-image" data-index="23">
            <img src="https://picsum.photos/id/1063/200/200" alt="验证图片23">
          </div>
          <div class="verify-image" data-index="24">
            <img src="https://picsum.photos/id/1064/200/200" alt="验证图片24">
          </div>
          <div class="verify-image" data-index="25">
            <img src="https://picsum.photos/id/1065/200/200" alt="验证图片25">
          </div>
          <div class="verify-image" data-index="26">
            <img src="https://picsum.photos/id/1066/200/200" alt="验证图片26">
          </div>
          <div class="verify-image" data-index="27">
            <img src="https://picsum.photos/id/1062/200/200" alt="验证图片27">
          </div>
        </div>
        
        <div class="verification-actions">
          <button class="verify-btn btn-refresh">
            <i class="fa fa-refresh"></i> 刷新
          </button>
          <button class="verify-btn btn-confirm">确认验证</button>
        </div>
      </div>
    </div>
    
    <!-- 验证组件 - 风格4：深色模式 -->
    <div class="verification-container" id="verify4">
      <button class="back-btn" id="back4">&larr;</button>
      
      <div class="verification-header">
        <h2 class="verification-title">账号验证</h2>
        <p class="verification-desc">请完成以下验证以保护您的账号</p>
      </div>
      
      <div class="info-alert alert-info">
        <i class="fa fa-info-circle"></i>
        <div>
          检测到新设备登录，请选择所有包含"行人"的图片进行身份验证。
        </div>
      </div>
      
      <div class="image-verification">
        <p class="verify-instruction">选择所有包含行人的图片</p>
        
        <div class="image-grid">
          <div class="verify-image" data-index="28">
            <img src="https://picsum.photos/id/1082/200/200" alt="验证图片28">
          </div>
          <div class="verify-image" data-index="29">
            <img src="https://picsum.photos/id/1083/200/200" alt="验证图片29">
          </div>
          <div class="verify-image" data-index="30">
            <img src="https://picsum.photos/id/1084/200/200" alt="验证图片30">
          </div>
          <div class="verify-image" data-index="31">
            <img src="https://picsum.photos/id/1085/200/200" alt="验证图片31">
          </div>
          <div class="verify-image" data-index="32">
            <img src="https://picsum.photos/id/1086/200/200" alt="验证图片32">
          </div>
          <div class="verify-image" data-index="33">
            <img src="https://picsum.photos/id/1087/200/200" alt="验证图片33">
          </div>
          <div class="verify-image" data-index="34">
            <img src="https://picsum.photos/id/1088/200/200" alt="验证图片34">
          </div>
          <div class="verify-image" data-index="35">
            <img src="https://picsum.photos/id/1089/200/200" alt="验证图片35">
          </div>
          <div class="verify-image" data-index="36">
            <img src="https://picsum.photos/id/1090/200/200" alt="验证图片36">
          </div>
        </div>
        
        <div class="verification-actions">
          <button class="verify-btn btn-refresh">
            <i class="fa fa-refresh"></i> 重新加载
          </button>
          <button class="verify-btn btn-confirm">完成验证</button>
        </div>
      </div>
    </div>
    
    <!-- 验证组件 - 风格5：活力橙 -->
    <div class="verification-container" id="verify5">
      <button class="back-btn" id="back5">&larr;</button>
      
      <div class="verification-header">
        <h2 class="verification-title">安全验证</h2>
        <p class="verification-desc">验证您的身份以继续使用服务</p>
      </div>
      
      <div class="info-alert alert-warning">
        <i class="fa fa-shield"></i>
        <div>
          为了您的账号安全，请选择所有包含"商店招牌"的图片。
        </div>
      </div>
      
      <div class="image-verification">
        <p class="verify-instruction">选择所有包含商店招牌的图片</p>
        
        <div class="image-grid">
          <div class="verify-image" data-index="37">
            <img src="https://picsum.photos/id/42/200/200" alt="验证图片37">
          </div>
          <div class="verify-image" data-index="38">
            <img src="https://picsum.photos/id/43/200/200" alt="验证图片38">
          </div>
          <div class="verify-image" data-index="39">
            <img src="https://picsum.photos/id/44/200/200" alt="验证图片39">
          </div>
          <div class="verify-image" data-index="40">
            <img src="https://picsum.photos/id/45/200/200" alt="验证图片40">
          </div>
          <div class="verify-image" data-index="41">
            <img src="https://picsum.photos/id/46/200/200" alt="验证图片41">
          </div>
          <div class="verify-image" data-index="42">
            <img src="https://picsum.photos/id/47/200/200" alt="验证图片42">
          </div>
          <div class="verify-image" data-index="43">
            <img src="https://picsum.photos/id/48/200/200" alt="验证图片43">
          </div>
          <div class="verify-image" data-index="44">
            <img src="https://picsum.photos/id/49/200/200" alt="验证图片44">
          </div>
          <div class="verify-image" data-index="45">
            <img src="https://picsum.photos/id/50/200/200" alt="验证图片45">
          </div>
        </div>
        
        <div class="verification-actions">
          <button class="verify-btn btn-refresh">
            <i class="fa fa-refresh"></i> 换图
          </button>
          <button class="verify-btn btn-confirm">确认提交</button>
        </div>
      </div>
    </div>
    
    <!-- 验证组件 - 风格6：优雅紫色 -->
    <div class="verification-container" id="verify6">
      <button class="back-btn" id="back6">&larr;</button>
      
      <div class="verification-header">
        <h2 class="verification-title">身份验证</h2>
        <p class="verification-desc">完成图片验证以确认您的身份</p>
      </div>
      
      <div class="info-alert alert-info">
        <i class="fa fa-info-circle"></i>
        <div>
          请选择所有包含"动物"的图片，完成验证后即可继续使用全部功能。
        </div>
      </div>
      
      <div class="image-verification">
        <p class="verify-instruction">选择所有包含动物的图片</p>
        
        <div class="image-grid">
          <div class="verify-image" data-index="46">
            <img src="https://picsum.photos/id/237/200/200" alt="验证图片46">
          </div>
          <div class="verify-image" data-index="47">
            <img src="https://picsum.photos/id/238/200/200" alt="验证图片47">
          </div>
          <div class="verify-image" data-index="48">
            <img src="https://picsum.photos/id/239/200/200" alt="验证图片48">
          </div>
          <div class="verify-image" data-index="49">
            <img src="https://picsum.photos/id/240/200/200" alt="验证图片49">
          </div>
          <div class="verify-image" data-index="50">
            <img src="https://picsum.photos/id/241/200/200" alt="验证图片50">
          </div>
          <div class="verify-image" data-index="51">
            <img src="https://picsum.photos/id/242/200/200" alt="验证图片51">
          </div>
          <div class="verify-image" data-index="52">
            <img src="https://picsum.photos/id/243/200/200" alt="验证图片52">
          </div>
          <div class="verify-image" data-index="53">
            <img src="https://picsum.photos/id/244/200/200" alt="验证图片53">
          </div>
          <div class="verify-image" data-index="54">
            <img src="https://picsum.photos/id/245/200/200" alt="验证图片54">
          </div>
        </div>
        
        <div class="verification-actions">
          <button class="verify-btn btn-refresh">
            <i class="fa fa-refresh"></i> 刷新图片
          </button>
          <button class="verify-btn btn-confirm">提交验证</button>
        </div>
      </div>
    </div>
    
    <!-- 验证结果弹窗 -->
    <div class="result-modal" id="resultModal">
      <div class="result-content">
        <div class="result-icon success-icon" id="resultIcon">
          <i class="fa fa-check"></i>
        </div>
        <h3 class="result-title" id="resultTitle">验证成功</h3>
        <p class="result-desc" id="resultDesc">您已成功完成验证，可以继续使用社交功能</p>
        <button class="verify-btn btn-confirm" id="resultBtn">确定</button>
      </div>
    </div>
    
    <!-- 控制按钮 -->
    <div class="control-buttons">
      <button class="control-btn" id="prevBtn">
        <i class="fa fa-chevron-left"></i> 上一个
      </button>
      <button class="control-btn" id="nextBtn">
        下一个 <i class="fa fa-chevron-right"></i>
      </button>
    </div>
  </div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 当前状态
    let currentStyle = 1;
    let selectedImages = [];
    
    // DOM元素
    const switcherOptions = document.querySelectorAll('.switcher-option');
    const verifyContainers = {
      1: document.getElementById('verify1'),
      2: document.getElementById('verify2'),
      3: document.getElementById('verify3'),
      4: document.getElementById('verify4'),
      5: document.getElementById('verify5'),
      6: document.getElementById('verify6')
    };
    const mainPage = document.getElementById('mainPage');
    const startVerifyBtn = document.getElementById('startVerifyBtn');
    const prevButton = document.getElementById('prevBtn');
    const nextButton = document.getElementById('nextBtn');
    const bodyElement = document.body;
    const resultModal = document.getElementById('resultModal');
    const resultIcon = document.getElementById('resultIcon');
    const resultTitle = document.getElementById('resultTitle');
    const resultDesc = document.getElementById('resultDesc');
    const resultBtn = document.getElementById('resultBtn');
    
    // 初始化
    function init() {
      // 切换样式
      switcherOptions.forEach(option => {
        option.addEventListener('click', function() {
          const style = parseInt(this.getAttribute('data-style'));
          switchStyle(style);
        });
      });
      
      // 上一个/下一个按钮
      prevButton.addEventListener('click', showPrevStyle);
      nextButton.addEventListener('click', showNextStyle);
      
      // 开始验证按钮
      startVerifyBtn.addEventListener('click', function() {
        mainPage.style.display = 'none';
        verifyContainers[currentStyle].classList.add('active');
      });
      
      // 返回按钮
      for (let i = 1; i <= 6; i++) {
        document.getElementById(`back${i}`).addEventListener('click', function() {
          verifyContainers[i].classList.remove('active');
          mainPage.style.display = 'block';
          resetVerification(i);
        });
      }
      
      // 图片选择功能
      setupImageSelection();
      
      // 确认验证按钮
      setupVerifyButtons();
      
      // 刷新图片按钮
      setupRefreshButtons();
      
      // 结果弹窗按钮
      resultBtn.addEventListener('click', function() {
        resultModal.classList.remove('active');
        verifyContainers[currentStyle].classList.remove('active');
        mainPage.style.display = 'block';
        resetVerification(currentStyle);
      });
    }
    
    // 设置图片选择功能
    function setupImageSelection() {
      document.querySelectorAll('.verify-image').forEach(image => {
        image.addEventListener('click', function() {
          const index = this.getAttribute('data-index');
          
          if (this.classList.contains('selected')) {
            // 取消选择
            this.classList.remove('selected');
            selectedImages = selectedImages.filter(item => item !== index);
          } else {
            // 选中图片
            this.classList.add('selected');
            selectedImages.push(index);
          }
        });
      });
    }
    
    // 设置验证按钮
    function setupVerifyButtons() {
      document.querySelectorAll('.btn-confirm').forEach(btn => {
        if (btn.id !== 'resultBtn') {
          btn.addEventListener('click', function() {
            if (selectedImages.length > 0) {
              // 显示成功结果
              resultIcon.className = 'result-icon success-icon';
              resultIcon.innerHTML = '<i class="fa fa-check"></i>';
              resultTitle.textContent = '验证成功';
              resultDesc.textContent = '您已成功完成验证，可以继续使用社交功能';
              resultModal.classList.add('active');
            } else {
              // 显示错误结果
              resultIcon.className = 'result-icon error-icon';
              resultIcon.innerHTML = '<i class="fa fa-times"></i>';
              resultTitle.textContent = '验证失败';
              resultDesc.textContent = '请至少选择一张图片再提交验证';
              resultModal.classList.add('active');
            }
          });
        }
      });
    }
    
    // 设置刷新按钮
    function setupRefreshButtons() {
      document.querySelectorAll('.btn-refresh').forEach(btn => {
        btn.addEventListener('click', function() {
          const container = this.closest('.verification-container');
          const images = container.querySelectorAll('.verify-image img');
          
          // 随机刷新图片
          images.forEach(img => {
            const currentId = img.src.split('/id/')[1].split('/')[0];
            let newId = Math.floor(Math.random() * 300) + 1;
            
            // 确保新ID与旧ID不同
            while (newId == currentId) {
              newId = Math.floor(Math.random() * 300) + 1;
            }
            
            img.src = `https://picsum.photos/id/${newId}/200/200`;
          });
          
          // 重置选择状态
          container.querySelectorAll('.verify-image').forEach(img => {
            img.classList.remove('selected');
          });
          selectedImages = [];
        });
      });
    }
    
    // 重置验证状态
    function resetVerification(style) {
      const container = verifyContainers[style];
      container.querySelectorAll('.verify-image').forEach(img => {
        img.classList.remove('selected');
      });
      selectedImages = [];
    }
    
    // 关闭所有验证容器
    function closeAllVerifications() {
      Object.values(verifyContainers).forEach(container => {
        container.classList.remove('active');
        resetVerification(parseInt(container.id.replace('verify', '')));
      });
    }
    
    // 切换样式
    function switchStyle(style) {
      // 移除所有样式类
      bodyElement.classList.remove('style-1', 'style-2', 'style-3', 'style-4', 'style-5', 'style-6');
      
      // 添加当前样式类
      bodyElement.classList.add(`style-${style}`);
      
      // 更新当前样式
      currentStyle = style;
      
      // 更新切换器选中状态
      switcherOptions.forEach(option => {
        option.classList.remove('active');
        if (parseInt(option.getAttribute('data-style')) === style) {
          option.classList.add('active');
        }
      });
      
      // 更新应用logo颜色和按钮颜色
      document.querySelector('.app-logo').style.color = 'var(--primary)';
      document.querySelector('.action-btn').style.backgroundColor = 'var(--primary)';
      document.querySelectorAll('.control-btn').forEach(btn => {
        btn.style.backgroundColor = 'var(--primary)';
      });
      
      // 重置显示状态
      closeAllVerifications();
      mainPage.style.display = 'block';
    }
    
    // 显示上一个样式
    function showPrevStyle() {
      let prev = currentStyle - 1;
      if (prev < 1) prev = 6;
      switchStyle(prev);
    }
    
    // 显示下一个样式
    function showNextStyle() {
      let next = currentStyle + 1;
      if (next > 6) next = 1;
      switchStyle(next);
    }
    
    // 启动
    init();
  </script>
</body>
</html>
